<template>
	<view class="animated fadeIn faster">
		<view class="px-6 py-4">
			<view class="d-flex d-flex-between d-flex-wrap">
				<view class="d-flex d-flex-column d-flex-middle mb-3" v-for="hobby in hobbyList" :key="hobby.id">
					<image class="hobby-img" :src="hobby.img"></image>
					<text class="font26">{{hobby.title}}</text>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="fix-bottom bg-f8">
			<view class="px-3 py-2">
				<view class="fix-btn py-2 d-flex d-flex-center d-flex-middle colorfff" @click="gotoIndexPage">开始寻找你的搭子</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				hobbyList:[
					{
						id:'1',
						img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png',
						title:'王者荣耀'
					},{
						id:'2',
						img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png',
						title:'迷你世界'
					},{
						id:'3',
						img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png',
						title:'金铲铲之战'
					},{
						id:'4',
						img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png',
						title:'和平精英'
					},{
						id:'5',
						img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png',
						title:'第五人格'
					},{
						id:'6',
						img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg',
						title:'无畏锲约'
					},{
						id:'7',
						img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png',
						title:'永劫无间手游'
					},
				]
			}
		},
		methods: {
			gotoIndexPage() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped>
.hobby-img{
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 10rpx;
	border-radius: 50rpx;
}
.fix-bottom{
	position: fixed;
	z-index: 98;
	bottom: 0;
	left: 0;
	right: 0;
}
.fix-btn{
	background-image: linear-gradient(to right, #e65fd0, #69adf8);
	border-radius: 40rpx;
}
</style>
